<template>
  <div class="UploadFile">
    <!-- <img
      v-if="imageUrl"
      :src="imageUrl"
      class="avatar"
      v-image-preview
    /> -->

    <div class="demo-image__preview">

      <el-image
        v-if="imageUrl"
        :src="imageUrl"
        :preview-src-list="[imageUrl]"
        v-image-preview
        fit="cover"
        class="avatar"
      >
      </el-image>
    </div>

    <el-upload
      class="avatar-uploader"
      justify="center"
      :action="up_url"
      :show-file-list="false"
      :data="updataObj"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :multiple="false"
      :on-progress="showLoging"
    >
      <i
        v-if="imageup"
        class="el-icon-plus avatar-uploader-icon"
      ></i>
      <br />
      <el-button
        size="medium"
        type="primary"
        v-loading.fullscreen.lock="fullscreenLoading"
      >
        <span v-if="imageUrl">重新上传</span>
        <span v-else>上传作业</span>
      </el-button>
      <div
        slot="tip"
        class="el-upload__tip"
      >只能上传jpg/png文件，且不超过
      <span style="color:rgb(24 177 135)"> {{maxMB}}M</span></div>
    </el-upload>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from 'axios';
import imageConversion from 'image-conversion'
export default {
  name: "UploadFile",
  data () {
    return {
      // 变量
      imageUrl: "",
      imageup: "-1", //验证是否已上传
      updataObj: { workID: this.$route.query.id, token: "" },
      maxMB: 6,
      up_url: axios.defaults.baseURL + "/work/submit_img",
      fullscreenLoading: false,
    };
  },
  created: function () {
    this.updataObj.token = localStorage.getItem("token");
    this.getuserwork();
  },
  methods: {
    // 方法
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.imageup = "";
      this.$message({
        duration: 2000,
        showClose: true,
        message: "上传成功",
        type: "success"
      });
      this.fullscreenLoading = false;
    },
    beforeUpload2 (file) {
      return new Promise((resolve, reject) => {
        let isLt2M = file.size / 1024 / 1024 < 1 // 判定图片大小是否小于4MB
        if (isLt2M) {
          resolve(file)
        }
        console.log(file) // 压缩到400KB,这里的400就是要压缩的大小,可自定义
        imageConversion.compressAccurately(file, 400).then(res => {
          console.log(res)
          resolve(res)
        })
      })
    },

    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg";
      const ispng = file.type === "image/png";

      const isLt2M = file.size / 1024 / 1024 < this.maxMB;

      if (!isJPG && !ispng) {
        this.$message.error("请上传jpg或png格式图片!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 " + this.maxMB + "MB!");
      }
      file = null
      return (isJPG && isLt2M) || (ispng && isLt2M);
      // return true
    },
    beforeUpload2 (file) {
      console.log("1", file.size / 1024 / 1024)
      this.$util.compressImg(file)

    },
    openFullScreen1 () {
      this.fullscreenLoading = true;
    },
    showLoging () {
      this.openFullScreen1();
    },
    getuserwork () {
      this.$http.workApi
        .userwork({ workID: this.$route.query.id })
        .then(data => {
          let obj = data;
          if (obj.code == 2000) {
            if (obj.imageUrl != "") {
              this.imageUrl = obj.data.imgUrl;
              // console.log(this.imageUrl)
            }
          }
          let state = data.data.state;  //如果非未提交状态，则不显示加号
          if (state != "未提交") {
            this.imageup = "";
          }
          // console.log(obj)
        })
        .catch(err => {
          this.$message.Error("请求失败");
        });
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview (file) {
      // console.log(file);
    },
    handleExceed (files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      // return this.$confirm(`文件大小过大 确定移除 ${ file.name }？`);
    }
  },
  components: {}
};
</script>

<style scoped >
.avatar-uploader {
  /* margin: 0 auto; */
  text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  display: block;
  background-color: lightblue;
  text-align: center;
  margin: 0 auto;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  margin: 0 auto;
}
</style>
